20. Exercise: Change LinearLayout to GridLayout

Now it’s your turn to complete this exercise yourself!

In this exercise you'll take the RecyclerView you finished in the last exercise and update it display using a GridLayoutManager.

When you've completed this exercise your app will display the data using a grid.

1. In fragment_sleep_tracker.xml, remove LinearLayoutManager.

   Delete the line app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager".
   
   
   

2. In SleepTrackerFragment onCreateView, create a new GridLayoutManager and bind it to the RecyclerView.

   Access the RecyclerView in the binding object using binding.sleepList.

   val manager = GridLayoutManager(activity, 3)
   binding.sleepList.layoutManager = manager

1. In list_item_sleep_night, delete the sleep_length TextView because it is not used in the new design.
   
   
   

2. In list_item_sleep_night, edit the quality_string TextView to display to place it underneath the ImageView so it displays correctly in the GridView.

   For a challenge, you can update the XML yourself to create the layout in the design surface view below:

Your updated layout should look like this:

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="sleep"
            type="com.example.android.trackmysleepquality.database.SleepNight" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/quality_image"
            android:layout_width="@dimen/icon_size"
            android:layout_height="60dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:srcCompat="@drawable/ic_sleep_5"
            app:sleepImage="@{sleep}"/>

        <TextView
            android:id="@+id/quality_string"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            app:layout_constraintEnd_toEndOf="@+id/quality_image"
            app:layout_constraintStart_toStartOf="@+id/quality_image"
            app:layout_constraintTop_toBottomOf="@+id/quality_image"
            app:sleepQualityString="@{sleep}"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

5. Build and run the app. You should now see the data in your new grid layout!

   Try adding an item by starting sleep and see the animation for yourself!

If you want to start at this step, you can download this exercise from: Step.10-Exercise-Replace-LinearLayout-with-GridLayout.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.10-Solution-Replace-LinearLayout-with-GridLayout, or using this git diff.

Reference Documentation

• Customize Your RecyclerView
• Customize Your GridLayout